<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop">船舶规范</div>
      <div class="table" :style="{ width: tableWidth }">
        <div class="everyShipContain">
          <div class="shipContain" v-for="item in tableData">
            <div class="imageBox">
              <img
                :src="imageSrc(item.image)"
                alt=""
                style="width: 100%; height: 20vh"
                @click="handleRowDblclick(item)"
              />
            </div>
            <div class="shipNameText" style="font-size: 18px">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";
import sendClass from "@/mitt/sendClass";
export default {
  beforeRouteEnter(to, from, next) {
    sendClass(2, "船舶规范");
    next();
  },
  name: "",
  data() {
    return {
      tableData: [],
      tableWidth: null,
      name: "",
      typeKey: "",
      havingNum: "",
      adventFlag: "",
      lastModifiedDate: "",
      id: "",
      uploadfile: true,
      typeKey: "",
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    imageSrc(src) {
      if (src) {
        return `data:mage/png;base64,${src}`;
      } else return "";
    },
    handleRowDblclick(row) {
      this.$router.push({
        path: "/app.shipSpecificationAdd",
        query: {
          name: row.name,
          id: row.id,
        },
      });
    },

    customIndex(index) {
      return (this.page - 1) * this.size + index + 1;
    },
    // 导出文件
    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },

    // 获取列表数据
    async getShipList(typeKey) {
      await service({
        methods: "get",
        url: "/dict-type/find-dict-item-list",
        params: {
          typeKey: typeKey,
        },
      })
        .then((e) => {
          this.tableData = e.data;
        })
        .catch((err) => {});
    },
    async getRenderList() {
      await service({
        methods: "get",
        url: "/dict-type/find-all",
      })
        .then((e) => {
          e.data.forEach((element) => {
            if (element.name == "船分类") {
              this.getShipList(element.typeKey);
            }
          });
        })
        .catch((err) => {});
    },

    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = window.innerWidth - 220 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = window.innerWidth - 100 + "px";
        }
      } else {
        this.tableWidth = window.innerWidth - 20 + "px";
      }
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
  },

  created() {
    this.sendMessage();
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    let that = this;
    this.getRenderList();
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    background: white;
    .loadTop {
      width: 50%;
      line-height: 4vh;
      color: #777676;
      // text-indent: 10px;
      margin-left: 10px;
      font-size: 20px;
      font-weight: 800;
    }
    .loadSecond {
      width: 280px;

      color: #777676;
      text-align: center;
      line-height: 33px;
      color: #777676;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 10px;
      font-size: 15px;
      .topName {
        width: 90px;
        line-height: 33px;
        background: #67c23a;
        border-radius: 5px;
        a {
          display: block;
          width: 90px;
          line-height: 33px;
          text-decoration: none;
          color: white;
        }
      }
      .topName:nth-child(3) {
        background: #242121;
      }
    }
    // .loadExcel {
    //   width: 200px;
    //   margin-top: 10px;
    //   margin-left: 10px;

    //   height: 20px;
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    //   .button {
    //     width: 60px;
    //     line-height: 20px;
    //     font-size: 18px;
    //     text-align: center;
    //   }
    // }
  }
  // background: blue;
}
.table {
  width: 98.5%;
  margin: auto;
  // margin-top: 2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65vh;
  // background: red;
}

/* 必须是input为 checkbox class 添加 switch 才能实现以下效果 */

@media (min-width: 0px) and (max-width: 960px) {
  .manyInput {
    width: 375px !important;
    display: block !important;
    .inputInner {
      margin: auto !important;
      // margin-top: 10px !important;
    }
  }
  .closeAndSrue {
    width: 110px;
  }
}
</style>
